<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>
<body>
<div id="root">

</div>

</body>
<script type="text/babel">
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    class App extends React.Component{
        state = {
            num:100,
            username:"lisi"
        }
        render(){
            console.log("render");
            const {num,username} = this.state;
            return (
                <div>
                    <h3>App组件</h3>
                    <button onClick={()=>{
                        // 规范:不要更改多次
                        // this.state.num++;
                        // this.setState({
                        //     num:this.state.num
                        // })

                        // 以下视图不会发生更改
                        // this.setState({
                        //     num:this.state.num++
                        // })

                        // this.setState更改的状态是异步的。
                        // this.setState({
                        //     num:this.state.num+1
                        // });
                        // console.log(this.state.num);


                        // this.setState({
                        //     username:this.state.username+"!"
                        // })
                        // // 逻辑代码
                        // this.setState({
                        //     num:this.state.num+1
                        // })


                        // this.setState的数据是异步更新，视图肯定也是异步的
                        // this.setState({
                        //     username:this.state.username+"!"
                        // })
                        // console.log(document.querySelector("button").innerText)


                        // this.setState该函数接收两个参数：第一个参数是对象，可以通过该对象指定更改的状态属性，第二个参数是一个回调函数
                        // 回调函数会在视图更新完毕之后执行
                        // const _this = this;
                        // this.setState({
                        //     num:this.state.num+1
                        // },function(){
                        //     // console.log(this === _this)
                        //     console.log(this.state.num,document.querySelector("button").innerText)
                        // })


                        // this.state.num====>100
                        // 103------>  1   0
                        // this.setState({
                        //     num:this.state.num+1
                        // })
                        // this.setState({
                        //     num:this.state.num+1
                        // })
                        // this.setState({
                        //     num:this.state.num+1
                        // })

                        // 实现加3次1
                        // this.setState({
                        //     num:this.state.num+1
                        // },()=>{
                        //     this.setState({
                        //         num:this.state.num+1
                        //     },()=>{
                        //         this.setState({
                        //             num:this.state.num+1
                        //         })
                        //     })
                        // })


                        // this.setState接收的第一个参数可以是对象，也可以是函数
                        // 回调函数接收的参数是修改后的数据
                        // const _this = this;
                        // this.setState({
                        //     num:this.state.num+1
                        // })
                        // console.log(this.state.num);// 100
                        // this.setState(function(prevState){
                        //     console.log(this.state.num,prevState.num,prevState === this.state);// 100 101 false
                        //     // console.log(prevState === this.state)
                        //     // console.log(this === _this);// true
                        //     // console.log(this.state.num);
                        //     // return {
                        //     //     num:this.state.num+1
                        //     // }
                        // })


                        // 规范：如果你要修改的值涉及到原有的状态，建议使用函数
                        this.setState(prevState=>({
                            num:prevState.num+1
                        }))
                        this.setState(prevState=>({
                            num:prevState.num+1
                        }))
                        this.setState(prevState=>({
                            num:prevState.num+1
                        }))


                    }}>{num}-{username}</button>
                </div>
            )
        }
    }
    root.render(<App/>)
</script>
</html>